<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ !currentID ? '添加获奖记录' : '修改获奖记录' }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form :form="form">
					<a-form-item label="获奖成员">
						<a-select v-decorator="['UserNo', { rules: [{ required: true, message: '请选择获奖成员' }] }]" showSearch optionFilterProp="children" style="width:100%" >
							<a-select-option v-for="(item, index) in userList" :key="item.UserNo" :value="item.UserNo">{{item.UserNo}} - {{ item.Name }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="奖项类型">
						<a-select v-decorator="['Type', { rules: [{ required: true, message: '请选择奖项类型' }] }]" style="width:100%" @change="ActivityTypePrizeTypeFun">
							<a-select-option v-for="(item, index) in ActivityTypePrizeTypeList" :key="item.Key" :value="item.Key">{{ item.Value }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="奖项">
						<a-select v-decorator="['ActivityTypePrizeID', { rules: [{ required: true, message: '请选择奖项' }] }]" showSearch optionFilterProp="children" style="width:100%" >
							<a-select-option v-for="(item, index) in ActivityTypePrizeList" :key="index" :value="item.ID">{{ item.Title }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="奖项名称" v-show="form.getFieldValue('Type')==2"><a-input v-decorator="['PrizeTitle', { rules: [{ required: form.getFieldValue('Type')==2?true:false, message: '请输入奖项名称' }] }]" /></a-form-item>
					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">{{ !currentID ? '确认添加' : '确认修改' }}</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
import { AddActivityMemberPrize,UpdateActivityTypePrize,GetActivityTypePrizeListCommon,UserDoAddActivityMemberPrize } from '@/api/follow';
export default {
	props: {
		text: Object,
		userList:Array,
		ActivityTypePrizeTypeList:Array
	},
	watch: {
		text: function(text) {
			this.currentID = text.ID
			if (!this.currentID) {
			} else {
				this.currentID = text.ID;
				setTimeout(()=>{
					this.form.setFieldsValue({
						UserNo: text.UserNo,
						Type: text.Type,
						ActivityTypePrizeID: text.ActivityTypePrizeID,
						PrizeTitle: text.PrizeTitle,
					});
				},100)
					
			}
		}
	},
	data() {
		return {
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			currentID:'',
			DepartmenDropdowntList: [],
			ActivityTypePrizeList:[]
		};
	},
	methods: {
		async ActivityTypePrizeTypeFun(e){
			this.form.setFieldsValue({ ActivityTypePrizeID: '' });
			// let res = await GetActivityTypePrizeListCommon({type:e,activityID:this.$route.query.activityID})
				let res = await GetActivityTypePrizeListCommon({type:e,activityTypeID:this.$route.query.TypeID,levelID:this.$route.query.levelID})
			this.ActivityTypePrizeList = res.data.data
			if(e){
				this.form.setFieldsValue({ PrizeTitle: '' });
			}
		},
		closeFunction(data) {
			this.form.resetFields();
			this.$emit('closeFun', data);
		},
		handleSubmit(e) {
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data = values;
					data.ActivityID = this.$route.query.activityID
					let res = {}
					if (!this.currentID) {
						res = this.text.myType=='user'?await UserDoAddActivityMemberPrize(data):await AddActivityMemberPrize(data);
					} else {
						res = await UpdateActivityTypePrize(data);
					}
					if (res.data.code === 0) {
						this.$message.success(res.data.msg);
						this.closeFunction('1');
					}else{
						this.$message.error(res.data.msg);
					}
				}
			})
		}
	}
};
</script>

<style lang="less" scoped>
	/deep/.ant-form-item {
		margin: 20px 50px;
		display: flex;
	}
	/deep/.ant-form-item-label {
		width: 100px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}
	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

.ant-form-item {
	margin-bottom: 10px;
}

/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
</style>
